<template>
  <div class="shouli"><div class="hlxq_one_box flex1" id="jrjj"></div></div>
</template>

<script>
import echarts from 'echarts'
export default {
  data () {
    return {
      laorenTitle: [],
      laorenValue: []
    }
  },
  mounted () {
    this.LaoRenHandle()
  },
  methods: {
    LaoRenHandle () {
      this.$http.post(this.$api.LaoRen.laoRen, ' ', true).then(result => {
        let arr = result.data.result
        if (arr !== null || undefined || '') {
          for (const value of arr.values()) {
            this.laorenTitle.push(value.lrdj)
            this.laorenValue.push(value.fwsl)
          }

          this.charts(this.laorenTitle, this.laorenValue)
        }
        console.log('arr', arr)
      })
    },
    charts (arrX, arrY) {
      let myChart = echarts.init(document.getElementById('jrjj'))
      myChart.setOption({
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '5%',
          right: '3%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: arrX,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff', // 坐标字体颜色
                fontSize: 24
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff', // 坐标字体颜色
                fontSize: 24
              }
            }
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: '50',
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: 'white',
                    fontSize: 22
                  }
                }
              }
            },
            /* [4636, 3352, 3593, 3923, 957] */
            data: arrY
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.hlxq_one_box {
  width: 65%;
  height: 60%;
  position: absolute;
  left: 16rem;
  top: 12rem;
}
.chart {
  height: 80%;
  width: 95%;
  position: absolute;
  left: 1rem;
  top: 3rem;
}
.shouli {
  width: 100%;
  height: 100%;
  .Inv_ul {
    width: 89.375rem;
    height: 4.375rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: bold;
    margin: 1.285rem auto 0.825rem;
  }
  .Inv_ula {
    width: 88.99rem;
    height: 4.375rem;
    font-weight: bold;
    border: 1px solid rgba(0, 255, 255, 1);
  }
  .Inv_ulb {
    font-weight: bold;
    width: 89.375rem;
    height: 3.75rem;
    overflow: hidden;
    li {
      padding: 1rem;
    }
  }
  .superviseList {
    overflow-x: hidden;
    overflow-y: auto;
  }
  .superviseList::-webkit-scrollbar {
    width: 6px;
    border-radius: 10px;
    background: rgba($color: #fff, $alpha: 0.6);
  }
  .superviseList::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba($color: #fff, $alpha: 1);
  }
  .Inv_ulb:nth-child(even) {
    background: rgba(0, 255, 255, 0.1);
  }
  .category {
    color: #30dfff;
  }
}
</style>
